<template>
    <div class="statement_quantity_box">
        <div class="num_box">
            <div class="title">
                进群人次
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="通过本次活动进群的人次（包含退群人次）"
                    placement="top">
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(state.total_join) }}</div>
        </div>
        <div class="num_box">
            <div class="title">
                退群人次
                <el-tooltip class="box-item" effect="dark" content="通过本次活动进群后退群的人次" placement="top">
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(state.total_retreat) }}</div>
        </div>
        <div class="num_box">
            <div class="title">
                净增人数
                <el-tooltip class="box-item" effect="dark" content="通过本次活动进群的人数减去退群人数" placement="top">
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(state.total_group) }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { numFormat } from '@/utils/utils';
import { defineExpose, ref } from 'vue';
const state = ref({
    total_join: 0,
    total_retreat: 0,
    total_group: 0
});
defineExpose({
    state
});
</script>

<style lang="scss" scoped>
.statement_quantity_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-sizing: border-box;
    padding: 24px;
    margin: 16px 0;

    .num_box {
        text-align: left;

        .title {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}
</style>
